<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿王者荣耀英雄列表选项卡</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!-- 英雄介绍层开始 -->
    <div class="herolist">
        <!-- 版心 -->
		<div class="w">
            <!-- 标题部分 -->
			<div class="herolist-title"><h2>英雄介绍</h2></div>
			<!-- 导航部分 -->
			<div class="herolist-nav clearfix">
				<ul>
					<li class="active"><a href="#">英雄</a></li>
					<li><a href="https://pvp.qq.com/web201605/item.shtml" target="_blank">局内道具</a></li>
					<li><a href="https://pvp.qq.com/web201605/summoner.shtml" target="_blank">召唤师技能</a></li>
				</ul>
			</div>
            
            <!-- 英雄主要内容部分 -->
            <div class="herolist-box">
                <!-- 英雄类型部分 -->
                <div class="herolist-types">
                    <ul class="types-left">
                        <li>综合</li>
                        <li>定位</li>
                    </ul>

                    <ul class="types-name">
                        <!-- <li><span><i></i></span>本周免费</li> -->
                        <!-- <li><span><i></i></span>新手推荐</li> -->
                    </ul>

                    <ul class="types-name">
                        <!-- <li class="active"><span><i></i></span>全部</li> -->
                        <!-- <li><span><i></i></span>坦克</li> -->
                        <!-- <li><span><i></i></span>战士</li> -->
                        <!-- <li><span><i></i></span>刺客</li> -->
                        <!-- <li><span><i></i></span>法师</li> -->
                        <!-- <li><span><i></i></span>射手</li> -->
                        <!-- <li><span><i></i></span>辅助</li> -->
                    </ul>

                    <div class="herosearch">
                        <input type="text" placeholder="请输入你想要搜索的英雄名">
                        <a href="#"></a>
                    </div>
                </div>
                <!-- 英雄内容部分 -->
                <div class="herolist-content">
                    <ul class="clearfix">
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                        <li>
                            <a href="https://pvp.qq.com/web201605/herodetail/515.shtml" target="_blank">
                                <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/515/515.jpg"/>
                                嫦娥
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/herolist.js"></script>
    <script>
        // 要求1:翻转目标数组数据heroList
        var heroList = heroList.reverse();
        
        // 获取.types-name对应的所有ul标签
        var typesNames = document.querySelectorAll(".types-name");

        // 获取.herolist-content中的ul标签
        var herolistContentUl = document.querySelector(".herolist-content ul");

        // 要求2: 根据pTypes数据, 显示所有综合类型
        var htmlStr1 = "";
        pTypes.forEach(function( item ){
            htmlStr1 += "<li data-ptype='" + item.id+"'><span><i></i></span>" + item.ptype + "</li>";
        });
        typesNames[0].innerHTML = htmlStr1;

        // 要求3: 根据heroTypes数据, 显示所有定位类型
        var htmlStr2 = "";
        heroTypes.forEach(function( item ){
            if( item.id == 0 ){
                htmlStr2 += "<li class='active' data-type='" + item.id+"'><span><i></i></span>" + item.type + "</li>";
            }else{
                htmlStr2 += "<li data-type='" + item.id+"'><span><i></i></span>" + item.type + "</li>";
            }
        });
        typesNames[1].innerHTML = htmlStr2;

        /**
         * 用于查询目标数据
         * @param {string} type 查询类型 取值"pay_type或者hero_type或者hero_type2"
         * @param {number} key 类型对应的数值
         * @returns {array} 目标数据
         */
        function search_data( type , key ){
            if( type == "hero_type" || type == "hero_type2"){
                if( key == 0 ){
                    return heroList;
                }

                var newArr = heroList.filter( function( item ){
                    return item["hero_type"] == key || item["hero_type2" ] == key;
                });

                return newArr;
            }

            if( type == "pay_type"){
                var newArr = heroList.filter( function( item ){
                    return item["pay_type"] == key;
                });
                return newArr;
            }
        }

        // 根据数据渲染.herolist-content中的ul标签内容的方法
        function renderData( data ){
            // 定义一个空字符串
            var htmlStr = '';
            // 遍历data数组
            data.forEach( function( item ){
                // 拼接字符串
                htmlStr += '<li>';
                htmlStr += '<a href="https://pvp.qq.com/web201605/herodetail/'+item.ename+'.shtml" target="_blank">';
                htmlStr += '<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/'+item.ename+'/'+item.ename+'.jpg"/>' + item.cname;
                htmlStr += '</a>';
                htmlStr += '</li>';
            });
            // 设置.herolist-content中的ul标签标签
            herolistContentUl.innerHTML = htmlStr;
        }

        // 清除.types-name所有li高亮的方法
        function clearLiHight(){
            for(var j = 0; j < typesNameLis.length; j++ ){
                typesNameLis[j].classList.remove("active");
            }
        }

        // 要求4: 默认显示全部数据
        renderData( heroList );

        // 要求5: 点击综合或者定位对应的类型,可以高亮当前被点击项, 并且显示相应的数据
        // 获取.types-name里面所有的li标签
        var typesNameLis = document.querySelectorAll(".types-name li");

        // 循环给.types-name里面所有的li标签绑定鼠标点击事件
        for(var i = 0; i < typesNameLis.length; i++ ){
            typesNameLis[i].onclick = function(){
                // 清除.types-name所有li高亮的方法
                clearLiHight();

                // 设置当前被点击li高亮
                this.classList.add("active");

                // 获取自定义属性data-ptype
                var ptype = this.dataset.ptype;
                if( ptype != undefined ){
                    renderData( search_data("pay_type", ptype ) );
                }

                // 获取自定义属性data-type
                var type = this.dataset.type;
                if( this.dataset.type != undefined ){
                    renderData( search_data("hero_type", type ) );
                }
            }
        }

        // 要求6: 文本框输入内容以后进行模糊查找,并高亮"全部"选项对应的li标签
        // 获取.herosearch里面的input标签
        var herosearchInput = document.querySelector(".herosearch input");
        // 延时器表示
        var timeout = null;
        // 给文本框绑定键盘输入事件
        herosearchInput.oninput = function(){
            // 清除之前的延时器
            clearTimeout( timeout );
            // 开启新的延时器
            timeout = setTimeout(function(){
                // 获取文本框输入的值
                var searchVal = herosearchInput.value;
                // 筛选目标数据
                var newArr = heroList.filter( function( item ){
                    return item.cname.indexOf( searchVal ) != -1;
                });
                // 渲染数据
                renderData( newArr );
                // 高亮"全部"选项对应的li标签
                clearLiHight();
                typesNames[1].children[0].classList.add("active");
            }, 200 )
        }
    </script>
</body>
</html>